<template>
    <div>
        <a-modal
         v-model:visible="visible" 
         :title="formState.id?(formState.view?'查看':'编辑'):'新增'"  
         @ok="handleOk" 
         @cancel="visible = false"
         class="enterprise-add-edit-modal"
         :width="700"
         :footer="null"
        >
            <div v-if="visible">
                <a-form :form="form" layout="horizontal" class="add-edit-form">
                    <a-form-item label="证件名称">
                        <a-input
                        v-model:value="formState.fzjmc"
                        placeholder="请输入证件名称"
                        v-decorator="[
                            'fzjmc', { initialValue:formState.fzjmc, rules: rules.fzjmc}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="证件编号">
                        <a-input
                        v-model:value="formState.fzjbh"
                        placeholder="请输入证件编号"
                        v-decorator="[
                            'fzjbh', { initialValue:formState.fzjbh, rules: rules.fzjbh}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="证件分类">
                        <a-input
                        v-model:value="formState.fzjfl"
                        placeholder="请输入证件分类"
                        v-decorator="[
                            'fzjfl', { initialValue:formState.fzjfl, rules: rules.fzjfl}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="发证单位">
                        <a-input
                        v-model:value="formState.ffzdw"
                        placeholder="请输入发证单位"
                        v-decorator="[
                            'ffzdw', { initialValue:formState.ffzdw, rules: rules.ffzdw}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="发证日期">
                        <a-date-picker
                        v-model:value="formState.ffzrq"
                        placeholder="请选择发证日期"
                        v-decorator="[
                            'ffzrq', { initialValue:formState.ffzrq, rules: rules.ffzrq}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="证件有效期" class="flex-1-box">
                        <span v-if="formState.fzjyxq == '长期有效'">{{ formState.fzjyxq }}</span>
                        <a-date-picker
                        v-else
                        v-model:value="formState.fzjyxq"
                        placeholder="请选择证件有效期"
                        v-decorator="[
                            'fzjyxq', { initialValue:formState.fzjyxq, rules: rules.fzjyxq}
                        ]"/>
                        <a-button style="margin-left: 5px;" v-if="formState.fzjyxq !== '长期有效'" class="blue-btn" type="primary" @click="formState.fzjyxq = '长期有效'"> 长期有效 </a-button>
                    </a-form-item>
                    
                    <a-form-item label="附件" class="flex-1-box" required>
                        <a-button
                            v-if="!(formState.fzjmc&&formState.fzjbh&&formState.fzjfl&&formState.ffzrq&&formState.ffzdw)"
                            class="blue-btn" 
                            type="primary" @click="uploadClick">
                                上传
                        </a-button>
                        <a-upload v-else style="margin-right: 5px;margin-bottom: 5px;" :beforeUpload="$event=>{return false}" :showUploadList="false" action="" @change="uploadAttachments">
                            <a-button
                            class="blue-btn" 
                            type="primary" @click="uploadClick">
                                上传
                            </a-button>
                        </a-upload>
                        <span style="color: #ed5565;">（请上传pdf文件或图片（.png、.jpg、.jpeg））</span>
                        <div :key="fileKey">
                            <div v-for="(item,index) in fileList" :key="index" class="file-certificate-v">
                                <!-- <div class="certificate-icon">
                                    <a-icon type="download" @click="downloadClick(item)"/>
                                    
                                </div> -->
                                <a @click="downloadClick(item)">{{ item.fwjxsmc+item.fwjlx }}</a>
                                <a-icon class="eye-icon-v" type="eye" @click="viewClick(item)"/>
                                <a-icon class="delete-icon-v" type="delete" @click="deleteClick(item)"/>
                            </div>
                        </div>
                    </a-form-item>
                </a-form>
            </div>
            <div style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                background-color: #fff;">
                <a-button @click="visible = false">取消</a-button>
                <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="handleOk(false)">保存并关闭</a-button>
            </div>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import { 
    spcyQyInfouploadQyZjFile,
    spcyQyInfoqueryQyZjFileList,
    getCrossLocalFile,
    deleteFileById,
} from './service/index'
import moment from 'moment'
import YchConstant from '@/api/YchConstant'
import blobType from '@/common/blobType'
export default {
    components:{
        compSelector,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fzjmc: [{
                    required: true,
                    message: '请输入证件名称',
                    trigger: 'blur',
                }],
                fzjbh: [{
                    required: true,
                    message: '请输入证件编号',
                    trigger: 'blur',
                }],
                fzjfl: [{
                    required: true,
                    message: '请输入证件分类',
                    trigger: 'blur',
                }],
                ffzrq: [{
                    type:'object',
                    required: true,
                    message: '请选择发证日期',
                    trigger: 'blur',
                }],
                fzjyxq: [{
                    type:'object',
                    required: true,
                    message: '请选择证件有效期',
                    trigger: 'blur',
                }],
                ffzdw: [{
                    required: true,
                    message: '请输入发证单位',
                    trigger: 'blur',
                }],
            },
            rylxList:[],
            fileList:[],
            fileKey:null,
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            //console.log(val)
            this.formState = {}
            this.formState = val
            this.formState.ffzrq = val.ffzrq?moment(val.ffzrq):''
            this.formState.fzjyxq = val.fzjyxq?(val.fzjyxq == '长期有效'?val.fzjyxq:moment(val.fzjyxq)):''
            
            this.fileList = []
            if(val.id){
                this.getAnnex(val)
            }
            
        },
        getAnnex(val){
            spcyQyInfoqueryQyZjFileList({id:val.id}).then(res=>{
                if(res.code == 200){
                    this.fileList = res.result
                }else{
                    this.fileList = []
                    this.$message.warning(res.message)
                }
            })
            this.fileKey = Date.now()
        },
        uploadClick(){
            if(!this.formState.id){
                this.handleOk(true,true)
            }
        },
        uploadAttachments({file}){//上传附件
            //console.log('上传文件',this.formState)
            if(file.name.indexOf('.pdf') !== -1 || file.name.indexOf('.png') !== -1 || file.name.indexOf('.jpg') !== -1 || file.name.indexOf('.jpeg') !== -1){
                const fileData = new FormData();
                fileData.append("file",file);
                fileData.append("id",this.formState.id);
                spcyQyInfouploadQyZjFile(fileData).then(res=>{
                    if(res.code !== 200){
                        this.$message.warning(res.message)
                    }else{
                        this.getAnnex(this.formState)
                        this.$message.success('上传成功')
                    }
                })
            }else{
                this.$message.warning('请上传pdf文件或图片（.png、.jpg和.jpeg）')
            }
        },
        viewClick(item){
            //console.log(item)
            window.open(
                bootConfig[process.env.NODE_ENV].locality_ApI+YchConstant.SPZX_SPCY+'/spcyQyInfo/getCrossLocalFile?id='+item.id
            )
            this.getData({...this.currentRow,noFirstLoad:true})
        },
        deleteClick(val){
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    deleteFileById({id:val.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                            that.getAnnex(that.formState)
                        }else{
                            that.$message.warning(res.message)
                        }
                    })
                },
                
            });
        },
        downloadClick(item){
            //console.log(item)
            let fwjlx = item.fwjlx
            var that = this
            this.DownloadTemplateLoading = true
            var fileName = item.fwjxsmc
            let param = { id:item.id}
            
            getCrossLocalFile(param).then((data) => {
                this.DownloadTemplateLoading = false
                if (!data) {
                    that.$message.warning('文件下载失败')
                    return
                }
                    let index = blobType.suffix.indexOf(fwjlx)
                    let url = window.URL.createObjectURL(new Blob([data], { type:blobType.type[index] }))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName)
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link) //下载完成移除元素
                    window.URL.revokeObjectURL(url) //释放掉blob对象
                // }
            })
        },
        
        handleOk(val){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        this.$emit('editItem',{
                            ...this.formState,
                            ...values,
                            ffzrq:this.formState.ffzrq = this.formState.ffzrq?moment(this.formState.ffzrq).format('YYYY-MM-DD'):'',
                            fzjyxq:this.formState.fzjyxq?(this.formState.fzjyxq == '长期有效'?this.formState.fzjyxq:moment(this.formState.fzjyxq).format('YYYY-MM-DD')):''
                        },val)
                    }else{
                        this.$emit('addItem',{
                            ...this.formState,
                            ...values,
                            ffzrq:this.formState.ffzrq = this.formState.ffzrq?moment(this.formState.ffzrq).format('YYYY-MM-DD'):'',
                            fzjyxq:this.formState.fzjyxq?(this.formState.fzjyxq == '长期有效'?this.formState.fzjyxq:moment(this.formState.fzjyxq).format('YYYY-MM-DD')):''
                        },val)
                    }
                    
                }
            })
        },
    }
}
</script>
<style lang="less">
.enterprise-add-edit-modal{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
        }
        .ant-form-item-label{
            width: 85px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
        .annex-flex-1{

        }
    }
    .file-certificate-v{
        display: flex;
        // flex-direction: column;
        border: 1px solid #e8e8e8;
        line-height: 20px;
        margin-top: 10px;
        padding: 5px;
        .certificate-icon{
            color: #5ca3e5;
            font-size: 20px;
        }
        .eye-icon-v{
            margin-left: 20px;
            color: #5ca3e5;
            font-size: 20px;
        }
        .delete-icon-v{
            margin-left: 20px;
            color: #ed5565;
            font-size: 20px;
        }
    }
}

</style>
